<!--
*@Author: QWP
*@Description: 综合预警
*@Date: 2024-07-18 14:05:35
-->
<template>
  <u-card :title="h('span', {
    style: { cursor: 'pointer' },
    onClick: () => titleClick()
  }, '关注企业预警情况')">
    <div style="position: absolute; z-index: 10; top: 8px; right: 12px;">
      <a-space>
        <div class="u-focus-firm-index-change">
          <LeftOutlined />
        </div>
        <div class="u-focus-firm-index-change">
          <RightOutlined />
        </div>
      </a-space>
    </div>
    <a-row class="f-padding-16 f-margin-b12 f-margin-t6" style="background-color: #F5F6F6; border-radius: 16px">
      <a-space size="middle" @click="">
        <a-image :src="urlFile('index/focus_qy.png')" :preview="false"></a-image>
        <a-space direction="vertical">
          <span class="u-focus-firm-name">珠海格力电器股份有限公司</span>
          <a-space size="large" class="u-focus-firm-info">
            <span>行业类型：制造业</span>
            <span>当前风险等级：<a-tag color="#FF8940">三级风险</a-tag></span>
          </a-space>
        </a-space>
      </a-space>
    </a-row>
    <div ref="chartRef" style="width: 100%; height: 200px;cursor: pointer"></div>
  </u-card>

  <u-dialog title="关注类企业预警情况" wrap-class-name="full-modal" v-model:open="showDetial" :hideBtns="['submit']">
    <SumWarningIndex />
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, onMounted, h } from 'vue'
import { useEmergencyStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { getColor, levMainColor } from '@/views/index/emergencyIndex/data'
import USegmented from '@/views/index/emergencyIndex/component/segmented/Index.vue'
import { ColumnProps } from 'ant-design-vue/es/table'
import { ThunderboltOutlined } from '@ant-design/icons-vue'
import { urlFile } from '@/util/common'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import SumWarningIndex from '@/views/oa/warning/sumWarning/Index.vue'

const { level } = storeToRefs(useEmergencyStore())
const router = useRouter();

const state = reactive({
  levelColor: computed(() => getColor(level.value))
})

let activeKey = ref<string>('1')
const segmentedData = reactive([
  { label: '分地区预警情况', id: '1', },
  { label: '分企业类型预警情况', id: '2' }
]);

onMounted(() => {
  initCharts()

})

// 跳转至综合预警
const toSumWarning = () => {
  router.push({
    path: '/TransitIndex/SumWarning',
    query: {
      _tab: 1
    }
  })
}

const chartData = reactive([])
const chartRef = ref<HTMLElement>()
const initCharts = () => {
  let nowMounth = dayjs().format('M');
  let levels = ['一级', '二级', '三级', '四级'];
  let months = [];
  for (let i = 1;i <= nowMounth;i++) {
    months.push(i)
  }
  levels.forEach(item => {
    chartData.push({
      name: item, type: 'line', stack: 'total', data: months.map(i => Math.floor(Math.random() * 50) + 1)
    })
  })

  var myChart = echarts.init(chartRef.value);

  const option = {
    color: ["#FF4D4F", "#FF8940", "#FAB410", "#1890FF",],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: levels,
      right: 0,
      itemGap: 30,
      top: '10%',
      orient: 'vertical'
    },
    grid: {
      top: '10',
      left: '3%',
      right: '16%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months.map(i => i + '月')
    },
    yAxis: {
      type: 'value'
    },
    series: chartData
  };

  option && myChart.setOption(option);

  window.addEventListener('resize', () => {
    setTimeout(() => {
      myChart.resize()
    }, 100)
  })


}

// 卡片标题的点击
let showDetial = ref<boolean>(false)
const titleClick = () => {
  showDetial.value = true;
}


</script>

<style lang='scss' scoped>
.u-focus-firm-name {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: var(--font-size-level-2);
  color: #333333;
}

.u-focus-firm-info {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: var(--font-size-level-1);
}

.u-focus-firm-index-change {
  width: 32px;
  height: 32px;
  background: #D9D9D9;
  border-radius: 4px 4px 4px 4px;
  text-align: center;
  line-height: 32px;
  color: #fff
}
</style>